<template>
  <div
    id="TopNav"
    class="fixed bg-white z-30 flex items-center w-full border-b h-[61px]"
  >
    <div
      :class="$route.fullPath === '/' || $route.path === '/search' ? 'max-w-[1150px]' : ''"
      class="flex items-center justify-between w-full px-6 mx-auto"
    >
      <div :class="$route.fullPath === '/' || $route.path === '/search' ? 'w-[80%]' : 'lg:w-[20%] w-[70%]'">
        <NuxtLink to="/">
          <img width="115" src="~/assets/images/logo.png">
        </NuxtLink>
      </div>

      <div class="hidden md:flex items-center bg-[#F1F1F2] p-1 rounded-full max-w-[380px] w-full relative">
        <div v-show="isShow&&searchList.length!==0"
             class="absolute top-12 rounded-2xl w-[100%] h-auto bg-gray-200">
          <ul class="py-1">
            <li class="px-3 py-1 cursor-default"
                @click="getSearchItem(item.content)"
                v-for="(item,index) in searchList" :key="index">{{ item.content }}
            </li>
          </ul>
        </div>
        <input
          type="text"
          @focus="isShow=true"
          @blur="blur"
          v-model="keyword"
          @keydown.enter="getSearchItem(keyword)"
          class="w-full pl-3 my-2 bg-transparent placeholder-[#838383] text-[15px] focus:outline-none"
          placeholder="Search accounts"
        >
        <div class="px-3 py-1 flex items-center border-l border-l-gray-300">
          <Icon name="icon-sousuo" color="#A1A2A7" size="22"/>
        </div>
      </div>

      <div class="flex items-center justify-end gap-3 min-w-[275px] max-w-[320px] w-full">
        <button
          @click="isLoggedIn()"
          class="flex items-center border rounded-sm px-3 py-[6px] hover:bg-gray-100"
        >
          <Icon name="icon-zengjia" color="#000000" size="16"/>
          <span class="px-2 font-medium text-[15px]">Upload</span>
        </button>

        <div class="flex items-center" v-if="!$userStore.id">
          <button
            @click="$store.commit('general/change_isLoginOpen',true)"
            class="flex items-center bg-[#F02C56] text-white border rounded-md px-3 py-[6px]"
          >
            <span class="mx-4 font-medium text-[15px]">Log in</span>
          </button>
          <Icon name="icon-gengduo" color="#161724" size="25"/>
        </div>
        <div class="flex items-center" v-else>
          <Icon class="ml-1 mr-4" name="icon-fasong" color="#161724" size="30"/>
          <Icon class="mr-5" name="icon-pinglun2" color="#161724" size="27"/>
          <div class="relative">
            <button
              class="mt-1" @click="showMenu = !showMenu"
            >
              <img
                class="rounded-full"
                width="33"
                :src="$userStore.image"
              >
            </button>
            <div
              ref="PopupMenu"
              v-show="showMenu"
              id="PopupMenu"
              class="absolute bg-white rounded-lg py-1 w-[200px] shadow-xl border top-[43px] -right-2"
            >
              <NuxtLink
                :to="`/profile/${$userStore.id}`"
                @click="showMenu = false"
                class="flex items-center justify-start py-2 px-2 hover:bg-gray-100 cursor-pointer"
              >
                <Icon name="icon-yonghu" size="20"/>
                <span class="pl-2 font-semibold text-sm">Profile</span>
              </NuxtLink>
              <div
                @click="logout"
                class="flex items-center justify-start py-2 px-1.5 hover:bg-gray-100 border-t cursor-pointer"
              >
                <Icon name="icon-tuichu" size="20"/>
                <span class="pl-2 font-semibold text-sm">Log out</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      keyword: '',
      isShow: false,
      searchList: []
    }
  },
  watch: {
    keyword(newVal) {
      this.getWord(newVal)
    }
  },
  methods: {
    async getWord(keyword) {
      if(!keyword) return;
      try {
        const res = await this.$axios({
          method: 'get',
          withCredentials: false,
          url: `http://127.0.0.1:4500/getWord?keyword=${keyword}`
        })
        this.searchList = res.data.data.sug_list
      } catch (e) {

      }
    },
    blur(){
      setTimeout(()=>this.isShow=false,150)
    },
    getSearchItem(word) {
      if (word) {
        this.$router.push(`/search?keyword=${word}`)
        this.keyword = ''
        this.isShow = false
      }
    },
    logout() {
      try {
        this.$store.dispatch('user/logout')
        this.$router.push('/')
      } catch (error) {
        console.log(error)
      }
    },
    isLoggedIn() {
      if (this.$userStore.id) {
        this.$router.push('/upload')
      } else {
        this.$store.commit('general/change_isLoginOpen', true)
      }
    }
  },
  computed: {
    $userStore() {
      return this.$store.state.user
    },
    $generalStore() {
      return this.$store.state.general
    }
  },
  mounted() {
    try {
      document.addEventListener('mouseup', (e) => {
        let popupMenu = document.getElementById('PopupMenu');
        if (popupMenu && !popupMenu.contains(e.target)) {
          this.showMenu = false
        }
      });
    } catch (e) {

    }

  }
}
</script>
